<template>
  <div class="forgot-password-box">
    <div class="top-box">
      <div class="box">
        <div class="left">
          <div class="safePromise"></div>
        </div>
        <div class="right" @click="goLogin">
          <i class="el-icon-user-solid"></i>您好，请登录
        </div>
      </div>
    </div>
    <div class="logo-box">
      <!-- <img src="@/assets/images/logo.png" alt /> -->
      <img :src="loginPng" alt />
    </div>
    <div class="content-box">
      <div class="page-title">
        <div class="left-color"></div>
        <div class="title">登录 <span>/ SIGN IN</span></div>
      </div>
      <div class="step-box">
        <div class="mobile-box">
          <el-form
            :model="phoneForm"
            :rules="phoneRules"
            label-width="100px"
            size="medium"
            ref="phoneForm"
          >
            <!-- <el-form-item label="手机号" prop="mobile">
              <el-input
                placeholder="请输入手机号"
                v-model="phoneForm.mobile"
                clearable
              ></el-input>
            </el-form-item> -->
            <el-form-item label="公司" prop="companyId">
              <el-select
                v-model="phoneForm.companyId"
                placeholder="请选择公司"
                size="medium"
                @change="changeCompany"
                clearable
                class="multiple-status"
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="item in companyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="部门" prop="departmentId">
              <el-select
                v-model="phoneForm.departmentId"
                placeholder="请选择部门"
                size="medium"
                clearable
                class="multiple-status"
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="item in departmentList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
              <el-input
                placeholder="请输入手机号"
                v-model="phoneForm.mobile"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                placeholder="请输入密码"
                v-model="phoneForm.password"
                clearable
                type='password'
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="验证码" prop="testCode">
              <div class="inner-box">
                <el-input
                  placeholder="请输入验证码"
                  v-model="phoneForm.testCode"
                  clearable
                ></el-input>

                <div class="random-box">
                  <RandomNumber
                    ref="randomNum"
                    @getIdentifyCode="getIdentifyCode"
                  />
                </div>
              </div>
            </el-form-item> -->
            <el-form-item label="">
              <el-button
                size="medium"
                type="primary"
                @click="submitLogin('phoneForm')"
                class="button"
                >登录</el-button
              >
              <span class="forget" type="primary" v-if="!isPrivateLocal">
                <el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
              </span>
              <span class="forget" type="primary" @click="goToPassword" v-if="!isPrivateLocal">
                忘记密码?
              </span>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="bottom">
      <NavFooter />
    </div>
  </div>
</template>

<script>
import RandomNumber from "../forgot-password/components/RandomNumber.vue";
import NavFooter from "@/components/layout/NavFooter.vue";
import { checkPhone } from "@/utils/common";
import {
  getCompanyList,
  getDepartmentList,
  oALogin,
  getAllChildList
} from "@/api/member/index";
import loginPng from "@/assets/images/logo.png";
import Cookies from "js-cookie";
export default {
  name: "OALogin",
  components: {
    RandomNumber,
    NavFooter,
  },
  data() {
    return {
      isPrivateLocal: process.env.VUE_APP_LOCAL == "fangshan",
      rememberPassword: false,
      companyList: [],
      departmentList: [],
      loginPng: loginPng,

      idIdentifyCode: "", // 验证码

      phoneForm: {
        mobile: "",
        companyId: '',
        departmentId: '',
        password: '',
        // testCode: "",
      },
      phoneRules: {
        mobile: [
          { required: true, message: "请输入手机号" },
          {
            validator: checkPhone,
            trigger: "blur",
          },
        ],
        // testCode: [{ required: true, message: "请填写验证码" }],
        password: [{ required: true, message: "请填写密码" }],
        companyId: [{ required: true, message: "请选择公司" }],
        departmentId: [{ required: true, message: "请选择部门" }],
      },
      newShow: false,
      againShow: false
    };
  },
  created() {
    this.getCompanyList();
  },
  mounted() {
    if (JSON.parse(localStorage.getItem("domainInfo"))?.homeLogo) {
      this.loginPng = JSON.parse(localStorage.getItem("domainInfo")).homeLogo;
    }
    // this.getCompanyList();
    // 如果有记录，将手机号密码回填
    if (Cookies.get("rememberInfo") && Cookies.get("rememberInfo") != 'undefined') {
      this.phoneForm = {
        ...this.phoneForm,
        mobile: JSON.parse(Cookies.get("rememberInfo"))?.mobile,
        password: JSON.parse(Cookies.get("rememberInfo"))?.password
      }
      this.rememberPassword = true
    }
  },
  methods: {
    // 获得部门
    getCompanyList() {
      const data = {};
      getCompanyList(data).then((res) => {
        const arr = [];
        res.data.map((e) => {
          arr.push({
            label: e.name || "",
            value: e.id,
          });
        });

        this.companyList = arr;
      });
    },
    // 公司变化
    changeCompany() {
      const data = {
        companyId: this.phoneForm.companyId,
        roleId: 1, // 只选择有窍的部门
      }
      getDepartmentList(data).then((res) => {
        const arr = [];
        res.data.map((e) => {
          arr.push({
            label: e.name || "",
            value: e.id,
          });
        });
        this.phoneForm.departmentId = null

        this.departmentList = arr;
      });
    },

    //  去登陆
    goLogin() {
      this.$router.push({
        name: "Login",
      });
    },
    // 获得前台验证码
    getIdentifyCode(value) {
      this.idIdentifyCode = value;
    },
    // 获得菜单codeArr
    getMenuCode(MenuTree) {
      MenuTree.map((e) => {
        this.codeArr.push(e.code);
        if (e.childList.length > 0) {
          this.getMenuCode(e.childList);
        }
      });
    },
    // 提交信息 登录
    submitLogin(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // if (this.idIdentifyCode !== this.phoneForm.testCode.toLowerCase()) {
          //   this.$message({
          //     type: "error",
          //     message: "验证码填写错误，请重新填写",
          //   });
          //   return;
          // }
          // 如果记住密码 将账号密码于cookie中记录下来
          if(this.rememberPassword) {
            const rememberInfo = {
              mobile: this.phoneForm.mobile,
              password: this.phoneForm.password
            }
            Cookies.set("rememberInfo", JSON.stringify(rememberInfo))
          } else {
            Cookies.remove("rememberInfo")
          }

          // 客服登录
          oALogin({ ...this.phoneForm })
            .then((res) => {
              if (res.code == 200) {
                // 获得被允许的菜单Code
                this.codeArr = [];
                this.getMenuCode(res.data.nodeList);
                const userInfo = {
                  name: res.data.name,
                  userId: res.data.id,
                  token: res.data.token,
                  mobile: res.data.mobile,
                  email: res.data.email,
                  roleList: res.data.roleList,
                  realName: res.data.realName
                };
                // 将用户名和 token 写入cookie 保存 / 考虑写入loaclStorage
                this.$store.commit(
                  "app/SET_USERINFO",
                  JSON.stringify(userInfo)
                );

                // 读取名下子部门
                getAllChildList().then((m) => {
                  res.data["childDepartmentList"] = m.data.filter(
                    (w) => w.id != res.data.departmentList[0].id
                  );

                  const localUserInfo = {
                    authIdArr: this.codeArr,
                    ...res.data,
                  };
                  // 将用户名等信息写入loaclStorage
                  this.$store.commit(
                    "app/SET_LOCAL_USERINFO",
                    JSON.stringify(localUserInfo)
                  );

                  this.$message({
                    type: "success",
                    message: "登录成功",
                  });

                  // 跳转到 登录时重定向的页面 ，  如无 则去首页
                  this.$router.push({
                    path: this.$route.query.redirect
                      ? this.$route.query.redirect
                      : "/",
                  });
                });
              }
            })
        }
      });
    },
    // 忘记密码
    goToPassword() {
      this.$router.push({ name: "ForgotPassword" });
    },
  },
};
</script>
<style lang="scss" scoped>
.forgot-password-box {
  background-color: #eff1f5;
  min-height: 100vh;
}

.top-box {
  background: #000;
  color: #ffffff;

  .box {
    // min-width: 1460px;
    height: 40px;
    line-height: 40px;
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .safePromise {
      color: #eb5405;
      font-size: 16px;
    }
    .right {
      cursor: pointer;
    }
  }
}
.logo-box {
  width: 80%;
  margin: 0 auto 10px;
  background-color: #fff;
  padding: 10px 0 10px 10px;
  img {
    max-height: 80px;
  }
}
.content-box {
  width: 80%;
  height: calc(100vh - 390px);
  min-height: 463px;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 20px;

  .page-title {
    padding: 10px 0 10px 0;
    font-size: 22px;
    line-height: 50px;
    display: flex;
    .left-color {
      height: 50px;
      width: 5px;
      background-color: #f88123;
      margin-right: 12px;
    }
    .title {
      span {
        font-size: 14px;
      }
    }
  }

  .step-box {
    .red {
      color: red;
    }
    .people {
      cursor: pointer;
    }
    .mobile-box {
      width: 45%;
      margin: 0 auto;
      padding: 20px 0;
    }
    .code-box {
      .code-tip {
        margin: 20px 0;
        padding-left: 34px;
      }
    }
    .success-box {
      div {
        margin: 20px 0;
      }
      .success-tip {
        color: #f88123;
        font-size: 22px;
        margin: 35px 0;
      }
    }

    .inner-box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .random-box {
        border: 1px solid #efefef;
        border-radius: 1px;
        margin: 0 0 0 20px;
      }
    }
    .password-box {
      .new-password {
        .password-strong {
          display: flex;
          justify-content: flex-end;
          .password-strong-item {
            display: flex;
            flex-direction: column;
            text-align: center;
            margin-left: 10px;

            .strong {
              width: 35px;
              height: 6px;
              border-radius: 3px;
              background: #f88123;
            }
            .grey {
              width: 35px;
              height: 6px;
              border-radius: 3px;
              background: #f5f7fa;
            }
            .strong-text {
              font-size: 10px;
              line-height: 30px;
            }
          }
        }
      }
    }
  }
}

.button {
  width: 150px;
  font-size: 18px;
  line-height: 18px;
  padding: 6px 15px;
}
.forget {
  cursor: pointer;
  margin-left: 20px;
}
.hand-show {
  cursor: pointer;
}
</style>
